.forget {
  width: 100%;
  height: 100%;
  .et-flex-column-normal();

  .header-box {
    width: 100%;
    box-shadow: 0 4px 10px #eeeeee;

    .header {
      width: @content-width;
      height: 150px;
      box-sizing: border-box;
      margin: 0 auto;
      .et-flex-start();

      .logo {
        width: 108px;
        height: 112px;
        margin-right: 36px;
      }

      .title {
        height: 68px;
        padding-left: 24px;
        font-size: 22px;
        line-height: 68px;
        border-left: 1px solid #d9d9d9;
      }
    }
  }

  .main-box {
    width: 100%;

    .main {
      width: 1188px;
      margin: 30px auto 0;
      padding: 0 40px;
      box-sizing: border-box;
      background: #fdfdfd;

      .main-title {
        width: 100%;
        height: 63px;
        border-bottom: 1px solid #d9d9d9;
        position: relative;

        .title-left {
          position: absolute;
          left: 0;
          bottom: -1px;
          width: 76px;
          line-height: 36px;
          text-align: center;
          font-size: 18px;
          color: #666666;
          border-bottom: 3px solid @primary-color;
        }

        .title-right {
          position: absolute;
          right: 0;
          bottom: 0;
          color: #666666;
          line-height: 30px;

          .login {
            color: @primary-color;
            cursor: pointer;
          }
        }
      }

      .login-form {
        width: 520px;
        padding-top: 46px;
        margin: 0 auto;

        .form-row {
          width: 100%;

          &:not(:first-child) {
            margin-top: 20px;
          }

          .et-flex-start();

          .row-label {
            width: 100px;
            font-size: @font-size-base;
            color: #606266;
            .et-flex-end();
            flex-shrink: 0;
          }

          .row-input {
            flex: 1;
            height: 40px;
            padding: 0 15px 0 22px;
            box-sizing: border-box;
            border: 1px solid #dcdfe6;
            .et-flex-start();

            input {
              border: 0;
              outline: none;
              flex: 1;
              height: 38px;

              &::placeholder {
                color: #bbb;
              }
            }

            .field-icon {
              width: 20px;
              height: 20px;
              margin: 0 5px;
              font-size: 20px;
              flex-shrink: 0;
              color: #c0c4cc;

              &.hoverable {
                cursor: pointer;
              }
            }
          }

          .code-img {
            width: 100px;
            height: 40px;
            margin-left: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .send-btn {
            width: 100px;
            height: 40px;
            margin-left: 10px;
            color: white;
            .et-flex-center();
            background-color: @primary-color;
            cursor: pointer;

            &.status {
              background-color: #d9d9d9;
              pointer-events: none;
              cursor: not-allowed;
            }
          }
        }

        .tips {
          font-size: @font-size-base;
          color: #999999;
          padding: 8px 0 10px 100px;
          box-sizing: border-box;

          span {
            margin-left: 5px;
          }
        }

        .intensity {
          width: 100%;
          padding: 8px 0 20px 100px;
          box-sizing: border-box;
          .et-flex-start();

          .line {
            display: inline-block;
            width: 110px;
            height: 20px;
            background-color: #d9d9d9;
            margin-right: 8px;
            color: white;
            .et-flex-center();

            &.low {
              background-color: #fc1f1c;
            }

            &.middle {
              background-color: #fc7d11;
            }

            &.high {
              background-color: #079b6a;
            }
          }
        }

        .reg-argument {
          width: 100%;
          padding: 8px 0 20px 95px;
          box-sizing: border-box;
          font-size: @font-size-base;
          .et-flex-start();

          p {
            color: @primary-color;
            margin-left: 5px;
            margin-top: 5px;
            cursor: pointer;
          }
        }

        .btn-box {
          width: 100%;
          padding: 10px 40px;
          box-sizing: border-box;
          .et-flex-spacebetween();
          .btn{
            width: 180px;
            height: 40px;
            border: 1px solid @primary-color;
            color: @primary-color;
            cursor: pointer;
            .et-flex-center();
            &.confirm{
              background-color: @primary-color;
              color: white;
              margin-left: 20px;
            }
          }
        }
      }
    }
  }

  .footer-box {
    width: 100%;
    padding: 34px 0;

    .footer {
      width: @content-width;
      margin: 0 auto;

      p {
        width: 100%;
        height: 25px;
        text-align: center;
        font-size: @font-size-base;
        color: #666;
        line-height: 14px;
        margin-bottom: 0;
        .et-flex-center();

        .item {
          padding-right: 10px;
          cursor: pointer;

          &:not(:first-child) {
            padding-left: 10px;
            border-left: 1px solid #000;
          }
        }
      }
    }
  }
}